<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>个人信息</title>
    <link rel="icon" href="/images/logo.ico"/>
    <link rel="stylesheet" href="/lib/semantic/semantic.min.css">
    <link rel="stylesheet" href="/css/me.css">
    <link rel="stylesheet" href="/lib/animate/animate.min.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body class="m-back-img1">
<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small animated fadeInDown m-opacity"
     style="z-index: 99 !important;">
    <div class="ui container">
        <div class="ui inverted secondary stackable  menu">  <!--stackable 可堆叠的 应用在移动端-->
            <h2 class="ui teal header item">后台管理</h2>
            <a href="/" class=" nav_item item m-mobile-hide"><i class="coffee icon"></i>博客首页</a>
            <a href="/back/index.html" class=" nav_item item m-mobile-hide "><i class="home icon"></i>管理首页</a>
            <a href="/back/blogs.html" class=" nav_item item m-mobile-hide"><i class="book icon"></i>博客</a>
            <a href="/back/types.html" class="nav_item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="/back/tags.html" class="nav_item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <div class="nav_item right dropdown  menu m-mobile-hide">
                <div class="ui dropdown item">
                    <div class="text">
                        <img id="avatar" class="ui avatar image" src="/images/avatar/zry.jpg" alt="">
                        <span id="nickname">猫喵喵</span>
                    </div>

                    <i class="dropdown icon"></i>
                    <div class="menu element-ui dialog" style="z-index: 999 !important;">
                        <a href="/back/user.html" class="item">个人信息</a>
                        <a onclick="logout()" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" id="menu_toggle" class="ui black button m-mobile-show m-top-right ">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--中间内容-->
<div class="m-padded-tb-4em m-container-small ">
    <div class="ui form">
        <div class="ui container">
            <div class="ui card m-font-size m-margin-auto">
                <div class="ui center aligned content center">
                    <div class="blurring dimmable circular image">
                        <div class="ui dimmer">
                            <div class="content" onclick="uploadfile()">
                                <div class="center">
                                    <i class="large camera icon"></i>
                                </div>
                            </div>
                        </div>
                        <input type="file" name="file" id="file" accept=".jpg, .png" hidden onchange="load()">
                        <img id="avatar2" style="max-width: 150px;max-height: 150px;" class="ui small circular image"
                             src="https://unsplash.it/100/100?image=1005" alt="">
                    </div>
                </div>
                <div class="content">
                    <input type="text" id="userId" style="display: none">
                    <div class="ui left icon input  m-padded-tb-mini">
                        <i class="user  icon"></i>
                        <input type="text" id="username" placeholder="用户名:">
                    </div>

                    <div class="ui left icon input m-padded-tb-mini">
                        <i class="user icon"></i>
                        <input type="text" id="nickname2" name="nickname" placeholder="昵称:">
                    </div>

                    <div class="ui left icon input m-padded-tb-mini">
                        <i class="envelope outline  icon"></i>
                        <input type="text" id="email" name="email" placeholder="邮箱:">
                    </div>
                </div>
                <div class="ui center aligned extra content">
                    <button class="ui button" type="button" onclick="window.history.go(-1)">返回</button>
                    <button id="updateButton" class="ui teal button">提交</button>
                </div>
                <button onclick="updatePassword()" class="m-width-full ui button">修改密码</button>
            </div>
        </div>
    </div>
</div>

<div class="ui container">
    <div class="ui tiny modal user-update-pws-dialog">
        <div class="content" style="display: flex;justify-content: center;">
            <div class="row" style="display: flex;gap: 10px;flex-direction: column;align-items: flex-end;">
                <div class="column" style="display: flex;justify-content: center;align-items: center;gap: 10px;">
                    <span>原密码</span>
                    <div class="ui input">
                        <input type="password" name="originalPassword" required placeholder="输入原密码">
                    </div>
                </div>
                <div class="column" style="display: flex;justify-content: center;align-items: center;gap: 10px;">
                    <span>新密码</span>
                    <div class="ui input">
                        <input type="password" name="password" required placeholder="输入要修改的密码">
                    </div>
                </div>
                <div class="column" style="display: flex;justify-content: center;align-items: center;gap: 10px;">
                    <span>再次输入新密码</span>
                    <div class="ui input">
                        <input type="password" name="checkPassword" required placeholder="再次输入密码">
                    </div>
                </div>
            </div>
        </div>
        <div class="actions">
            <button class="ui negative button">取消</button>
            <button class="ui positive button">确认</button>
        </div>
    </div>
</div>
<!--底部footer-->
<footer class="ui inverted vertical segment m-padded-tb-massive">
    <!--    居中-->
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../../images/weixin.png"
                             class="ui rounded image" alt="" width="110px" height="110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <div class="three wide column">
                    <h4 class="ui inverted header">推荐博客</h4>
                    <div id="recommends" class="ui inverted link list m-text-thin m-text-spaced">
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                        <a href="#" class="item">用户故事</a>
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">联系我</h4>
                <div class="ui inverted link list m-text-thin m-text-spaced">
                    <a href="#" class="item">Email：1447051936@qq.com</a>
                    <a href="#" class="item">QQ:1447051936</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity">
                    这厮我的个人博客，会分享关于编程，思考，随笔相关的内容，欢迎大家访问，希望可以给到这的人有所帮助...
                </p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2021-2022 听宇轩. All rights reserved.</p>
        <div>
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41142102000072"
               style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img
                        src="http://www.beian.gov.cn/img/ico.ico" style="float:left;">
                <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#ff1c04;">豫ICP备
                    2021028184号</p></a>
        </div>
    </div>
</footer>
</body>
<!-- jquery -->
<script src="/js/jquery-3.6.0.min.js"></script>
<!-- jquery-validator -->
<script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
<!-- semantic-ui-->
<script type="text/javascript" src="/lib/semantic/semantic.min.js"></script>
<!-- layer -->
<script type="text/javascript" src="/lib/layer/layer.js"></script>
<!--comment.js-->
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript">
    $('.ui.card .image').dimmer({
        on: 'hover'
    });
    $(".ui.dropdown").dropdown({
        on: "hover"
    });
    $(function () {
        getUserInfo();
    });

    $('.message .close')
        .on('click', function () {
            $(this)
                .closest('.message')
                .transition('fade');
        });
    $("#updateButton").click(function () {
        var username = $('#username').val();
        var email = $('#email').val();
        var nickname = $('#nickname2').val();
        var avatar = $('#avatar2').attr('src');
        if (username === '' || email === '' || nickname === '') {
            layer.msg("参数不完整");
            return;
        }
        $.ajax({
            url: "/user/" + $("#userId").val(),
            type: "PUT",
            data: JSON.stringify({
                username: username,
                nickname: nickname,
                email: email,
                avatar: avatar
            }),
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            async: false,
            success: function (result) {
                layer.closeAll();
                if (result.code === 203) {
                    layer.msg(result.msg, {time: 600}, function () {
                        window.location.replace("/back/user.html");
                    });
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function (obj) {
                layer.closeAll();
                layer.msg('error');
            }
        });
    });

    function uploadfile() {
        $("#file").click();
    }

    function load() {
        var formData = new FormData();
        formData.append("file", $("#file")[0].files[0]);
        $.ajax({
            type: "post",
            url: "/qiniu/upload/avatar",
            data: formData,
            async: false,
            cache: false,   // 不缓存
            processData: false,   // jQuery不要去处理发送的数据
            contentType: false,   // jQuery不要去设置Content-Type请求头
            success: function (res) {
                if (res.code === 206) {
                    console.log(res)
                    $('#avatar2').attr('src', "http://tyux.top/" + res.data);
                }
                layer.msg(res.msg);

            },
            error: function () {
                layer.msg("上传出错");
            }
        });
    }

    function updatePassword() {
        $(".modal.user-update-pws-dialog").modal({ // 回调方法
            closable: true,
            onApprove: function () { // 单击确认按钮
                let password = $("input[name='password']").val()
                let checkPassword = $("input[name='checkPassword']").val()
                if (password !== checkPassword) {
                    layer.msg('两次密码输入的不一样');
                    return false;
                }
                let data = {
                    originalPassword: $("input[name='originalPassword']").val(),
                    password: password,
                    checkPassword: checkPassword
                }
                $.ajax({
                    url: "/updatePassword",
                    type: "POST",
                    async: false,
                    dataType: "json",
                    contentType: "application/json;charset=UTF-8",
                    data: JSON.stringify(data),
                    success: function (data) {
                        layer.closeAll();
                        if (data.code === 200) {
                            layer.msg("密码已成功更新");
                            $ ('.modal.user-update-pws-dialog').modal('hide');
                            return true;
                        }
                        layer.msg(data.msg);
                        return false;
                    },
                    error: function (obj) {
                        layer.closeAll();
                        layer.msg("请求超时");
                        return false;
                    }
                });
                return false;
            },
            onDeny: function () {  //单击取消按钮

            }
        }).modal("show");
        return false;
    }

</script>

</html>